<template>
  <div class="course-introduction">
    <div class="introduction-description">
      <h3 class="title">基本信息</h3>
      <div class="info-table">
        <div class="info-row">
          <div class="info-label">课程名称</div>
          <div class="info-value">{{ courseInfo.courseName }}</div>
        </div>
        <div class="info-row">
          <div class="info-label">教学班级</div>
          <div class="info-value">{{ courseInfo.clazz }}</div>
        </div>
        <div class="info-row">
          <div class="info-label">学年-学期</div>
          <div class="info-value">{{ courseInfo.semester }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {postRequest} from "@/utils/api";

export default {
  name: 'CourseIntroduction',
  data() {
    return {
      courseInfo: {
        courseName: '数据结构',    // 课程名称
        clazz: '1',   // 教学班级
        semester: '2024-2025', // 学年学期
      },
    };
  },
  created() {
    console.log('课程基本信息')
    this.fetchCourseInfo();
  },
  methods: {
    async fetchCourseInfo() {
      // const courseId = this.$store.getters.courseId;
      // console.log(courseId)
      const courseId = localStorage.getItem('courseId') || null;
      console.log("courseId:"+courseId)

      const res =await postRequest('/classDetail/information', {courseId:courseId}).then(res =>{
        if(res?.data?.code === 200){

          const course = res.data.data.course;
          console.log("course:"+course);
          this.courseInfo = {
            courseName: course.courseName || '暂无',
            clazz: course.clazz || '暂无',
            semester: `${course.academicYear || ''}-${course.semester || ''}`
          };
        }else {
          console.log('获取课程信息失败')
          throw new Error(res?.data?.message);
        }
      }).catch(error => {
        console.error('请求课程信息失败', error);
        this.$message.error(error.message)
      });

      console.log(res);
    }
  }
}
</script>
<style scoped>
.course-introduction{
  margin-top: 10px;
}
.introduction-description {
  background: #f4f3f3;
  padding: 25px;
}
.title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
}

.info-table {
  border-left: 4px solid #409EFF;
  background: #fff;
}

.info-row {
  display: flex;
  height: 40px;
  border-bottom: 1px solid #EBEEF5;
  align-items: center;
}

.info-label {
  width: 120px;
  padding-left: 20px;
  color: #606266;
  font-size: 12px;
}

.info-value {
  flex: 1;
  padding: 15px 20px;
  color: #303133;
  font-size: 12px;
}

/* 最后一行去掉底部边框 */
.info-row:last-child {
  border-bottom: none;
}
</style>
